<!DOCTYPE html>
<html lang="en">
<%
layout("/common/_body.html",{title:'登录'}){
%>
<!--页面样式-->
<link rel="stylesheet" type="text/css" href="/static/css/rem.css">
<!--适配-->
<script type="text/javascript">
    var html = document.querySelector('html');
    changeRem();
    window.addEventListener('resize', changeRem);

    function changeRem() {
        var width = html.getBoundingClientRect().width;
        html.style.fontSize = width / 19.2 + 'px';
    }
</script>
<style type="text/css">
    html,body{ height:100%;}
</style>
<body>
<!-- 页面头部 -->
<div class="header"></div>
<!-- 中间区域 -->
<div class="login_contain" >
    <video id="media" class="media" muted  autoplay loop>
        <source  src="/static/video/wuhan.mp4" type="video/mp4">
    </video>
    <div class="logon_wrap">
        <div class="login_header">
            <div class="header_cent">
                <img src="/static/image/big_logo.png"/>
                <h3>Wu Han Shi Sen Lin Gong An Ju Da Shu Ju Shi Zhan Ying Yong Ping Tai</h3>
            </div>
        </div>
        <form action="/web/saveLogin" method="post">
        <div class="login_Box">
            <h4 style="text-align: center">${msg!}</h4>
            <div class="login_line i_user">
                <input id="name" name="name" class="text" value="${name!}"  placeholder="请输入用户名" type="text">
            </div>
            <div class="login_line i_password">
                <input name="password" name="password" class="text" value="${password!}" placeholder="请输入密码" type="password">
            </div>
            <div class="forget"> <input name="remember" id="remember" type="checkbox" >&nbsp; 记住密码</input></div>
            <div class="login_Btn"  onclick="doLogin()" >登录</div>
        </div>
        </form>
    </div>
</div>

<!-- 页面底部 -->
<div class="footer"></div>

<%}%>
<script type="text/javascript">
        $(function(){
            $(".login_line input.text").focus(function(){
                $(this).parents().addClass('cur').siblings().removeClass('cur');
            })
            $(".forget .check").click(function (){
                if($(this).hasClass("checked")){
                    $(this).removeClass("checked");
                }else{
                    $(this).addClass("checked");
                }
            })

            document.body.addEventListener('mousedown', function(){
                document.getElementById('media').muted = false;
            }, false);
        })

    function doLogin(){
        let name = $("#name").val();
        let password = $("#password").val();
        $("form").submit();


    }

    $(function(){
        $(".forget .check").click(function (){
            if($(this).hasClass("checked")){
                $(this).removeClass("checked");
            }else{
                $(this).addClass("checked");
            }

        })
    })
</script>
</body>
</html>
